
var React = require('react');
let Table = require("uxcore-table");
let Button = require('uxcore-button');
let Form = require('uxcore-form');
let Dialog = require('uxcore-dialog');

let {FormRow, InputFormField, OtherFormField, Validators, ButtonGroupFormField, TableFormField} = Form;

let assign = require('object-assign');
var dataHeader='{"header":{"business":"findAllUser","destSystem":"SOAPlat","sourceSystem":"SOAPlat","rootParam":"User"},';
var dataBody='"body":'+'{}';
var data = dataHeader+dataBody+"}";
class UserManager extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            fetchParams: {data},
            editShow: false,
            newShow: false,
            editValues: null
        }
    }
    handleSearch() {
        var me = this;
        var data = me.refs.searchForm.getValues();
        me.setState({
            fetchParams: data.values
        }, function() {
            me.refs.table.fetchData();
        })
    }

    toggleShow(key) {
        var me = this;
        var obj = {};
        obj[key] = !me.state[key];
        me.setState(obj);
    }

    handleEditOk() {
        var me = this;
        var data = me.refs.editForm.getValues();
        if (data.pass) {
            var dataHeader='{"header":{"business":"updateUser","destSystem":"SOAPlat","sourceSystem":"SOAPlat","rootParam":"User"},';
            var dataBody='"body":'+JSON.stringify(data.values);
            var data = dataHeader+dataBody+"}";
            $.ajax({
                type: 'POST',
                url: 'bpp/execute',
                dataType: 'json',
                data: "data="+data,
                success: function(result) {
                    if (result.success) {
                        me.toggleShow('editShow');
                        me.refs.table.fetchData();
                    }
                }
            })
        }
    }

    handleEditCancel() {
        var me = this;
        me.refs.editForm.resetValues();
        me.toggleShow('editShow');
    }

    handleNewOk() {
        var me = this;
        var data = me.refs.editForm.getValues();
        if (data.pass) {
            var dataHeader='{"header":{"business":"addUser","destSystem":"SOAPlat","sourceSystem":"SOAPlat","rootParam":"User"},';
            var dataBody='"body":'+JSON.stringify(data.values);
            var data = dataHeader+dataBody+"}";
            $.ajax({
                type: 'POST',
                url: 'bpp/execute',
                dataType: 'json',
                data: "data="+data,
                success: function(result) {
                    if (result.success) {
                        me.toggleShow('newShow');
                        me.refs.table.fetchData();
                        me.refs.editForm.resetValues();
                    }
                }
            })
        }
    }

    handleNewCancel() {
        var me = this;
        me.toggleShow('newShow');
        me.refs.editForm.resetValues();

    }

    showEditDialog(rowData) {
        this.setState({
            editShow: true,
            editValues: rowData
        });
    }

    showNewDialog() {
        this.setState({
            newShow: true,
            editValues: {}
        });
    }

    render() {
        var me = this;

        var columns = [
            { dataKey: 'id', title: 'ID', width: 50,hidden:true},
            { dataKey: 'username', title:'用户名', width: 200},
            { dataKey: 'realName',title:'姓名', width: 150,ordered:true },
            { dataKey: 'email',title:"Email",width: 200},
            { dataKey: 'action1', title: '操作', width: 100, type: 'action', actions: {
                '编辑': function(rowData, actions) {
                    me.showEditDialog(rowData);
                }
            }}
        ];

        var tableProps = {
            width: 100+'%',
            fetchUrl: "bpp/execute",
            jsxcolumns: columns,
            fetchParams: me.state.fetchParams,
            actionBar: {
                '新增': function() {
                    me.showNewDialog();
                },
                '删除': function() {
                    console.log(me.selected);
                }
            },
            rowSelection: {
                onSelect: function(record, selected, selectedRows) {
                    me.selected = selectedRows;
                },
                onSelectAll: function(selected, selectedRows) {
                    me.selected = selectedRows;
                }
            }
        };

        var form = <Form className="demoForm" jsxvalues={me.state.editValues} ref="editForm">
            <FormRow>
                <InputFormField jsxlabel="用户名" jsxname="username" jsxrules={{validator: Validators.isNotEmpty, errMsg: "非空"}}/>
                <InputFormField jsxname="id" jsxshow={false}/>
            </FormRow>
            <FormRow>
                <InputFormField jsxlabel="姓名" jsxname="realName" jsxrules={{validator: Validators.isNotEmpty, errMsg: "非空"}}/>
                <InputFormField jsxlabel="email" jsxname="email" jsxrules={
                        [
                            {validator: Validators.isNotEmpty, errMsg: "非空"},
                            {validator: Validators.isEmail, errMsg: "请输入正确的 email 地址"}
                        ]
                    }/>
            </FormRow>

        </Form>;

        return (
            <div className="page-demo3">
                <Form ref="searchForm" className="searchForm">
                    <FormRow>
                        <InputFormField jsxname="searchTxt" jsxshowLabel={false} jsxplaceholder="输入关键字进行查询" />
                        <OtherFormField className="searchButton">
                            <Button onClick={me.handleSearch.bind(me)}>查询</Button>
                        </OtherFormField>
                    </FormRow>
                </Form>
                <Table {...tableProps} ref="table"/>
                <Dialog ref="editDialog" width={800} visible={me.state.editShow} title="修改用户" onOk={me.handleEditOk.bind(me)} onCancel={me.handleEditCancel.bind(me)}>
                    {form}
                </Dialog>
                <Dialog ref="newDialog" width={1000} visible={me.state.newShow} title="新增用户" onOk={me.handleNewOk.bind(me)} onCancel={me.handleNewCancel.bind(me)}>
                    {form}
                </Dialog>
            </div>
        )
    }
}
module.exports=UserManager;
